<script setup>
import { onMounted,ref } from 'vue';
import HomePanel from './HomePanel.vue'
import {getNewAPI} from '@/apis/home'
const newList = ref([])
const getNew = async ()=>{
    const res = await getNewAPI()
    console.log(res)
    newList.value = res.data.result
}
onMounted(()=>getNew())

</script>

<template>
  <div>
   <HomePanel title="新鲜好物" subTitle="欢迎抢购">
    <template v-slot:main>
        <ul>
            <li v-for="item in newList" :key="item.id">
                <RouterLink :to="`/detail/${item.id}`"> <img  alt="" v-lazy="item.picture"></RouterLink>
                <p class="title">{{ item.name }}</p>
                <p class="price">￥{{ item.price }}</p>
            </li>
        </ul>    
    </template>
   </HomePanel>
  </div>
</template>

<style scoped lang="scss">
ul{
    display: flex;
    li{
        margin-right: 10px;
        p{
            margin-top: 5px;
            text-align: center;
        }
        .title{
            font-weight: 700;
        }
        .price{
            color: $priceColor;
        }
    }
}
</style>